<!DOCTYPE html>
<html>

<head>
    <!-- DO NOT REMOVE/EDIT THIS COMMENT - META_TAGS -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">
    <!-- Web-App Manifest (https://w3c.github.io/manifest/) -->
    <link rel="manifest" href="/manifest.webmanifest">
    <!-- iOS (for "Add to Homescreen") -->
    <meta name="mobile-web-app-capable" content="yes">
    <title>Room | App by Company</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700" rel="stylesheet">
    <!-- Google Analytics -->
    <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
    <script>
    if (navigator.doNotTrack !== "1") {
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    }
    </script>
</head>

<body>
    <div id="support-root"></div>

    <a-scene
        loading-screen="enabled: false"
        hubs-systems
        capture-system
        listed-media
        local-audio-analyser
        class="grab-cursor"
        renderer="
            antialias: true;
            colorManagement: true;
            sortObjects: true;
            physicallyCorrectLights: true;
            alpha: false;
            webgl2: true;
            multiview: false;"
        shadow="type: pcfsoft;autoUpdate: false"
        networked-scene="audio: true; debug: true; connectOnLoad: false;"
        mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
        action-to-event__mute="path: /actions/muteMic; event: action_mute;"
        freeze-controller
        personal-space-bubble="debug: false;"
        rotate-selected-object
        environment-map
        set-max-resolution
        light="defaultLightsEnabled: false"
    >
        <a-assets>
            <img id="presence-count" crossorigin="anonymous" src="./assets/hud/presence-count.png">
            <img id="action-button" crossorigin="anonymous" src="./assets/hud/action_button.9.png">
            <img id="button" crossorigin="anonymous" src="./assets/hud/button.9.png">

            <a-asset-item id="drawing-pen" response-type="arraybuffer" src="./assets/models/DrawingPen.glb"></a-asset-item>
            <a-asset-item id="spawn-point" response-type="arraybuffer" src="./assets/models/spawn-point.glb"></a-asset-item>

            <template id="template-waypoint-avatar">
                <a-entity waypoint></a-entity>
            </template>

            <template id="occupiable-waypoint-icon">
                <a-entity
                    is-remote-hover-target
                    class="occupiable-waypoint-icon"
                    tags="singleActionButton: true"
                    sprite="name: spawn-point.png">
                </a-entity>
            </template>
            <template id="teleport-waypoint-icon">
                <a-entity
                    is-remote-hover-target
                    class="teleport-waypoint-icon"
                    tags="singleActionButton: true"
                    sprite="name: spawn-point.png">
                </a-entity>
            </template>
            <template id="waypoint-preview-avatar-template">
                <a-entity
                    overwrite-raycast-as-noop
                    class="waypoint-preview-avatar"
                    gltf-model-plus="inflate: true; src: #spawn-point;">
                </a-entity>
            </template>
            <template id="remote-avatar">
                <a-entity networked-avatar ik-root player-info matrix-auto-update visible="false">
                    <a-entity class="camera" matrix-auto-update></a-entity>

                    <a-entity class="left-controller" matrix-auto-update></a-entity>

                    <a-entity class="right-controller" matrix-auto-update></a-entity>

                    <a-entity class="model" gltf-model-plus="inflate: true">
                        <template data-name="AvatarRoot">
                            <a-entity
                                ik-controller
                                hand-pose__left
                                hand-pose__right
                                networked-audio-analyser
                            ></a-entity>
                        </template>

                        <template data-name="Neck">
                            <a-entity>
                                <a-entity
                                    billboard
                                    class="nametag"
                                    text="side: double; align: center; color: #ddd"
                                    position="0 1 0"
                                    scale="6 6 6"
                                ></a-entity>
                                <a-entity
                                    billboard
                                    class="identityName"
                                    text="side: double; align: center; color: #ddd"
                                    visibility-while-frozen="withinDistance: 100; requireHoverOnNonMobile: false;"
                                    position="0 0.8 0"
                                    scale="3 3 3"
                                ></a-entity>
                                <a-entity
                                    billboard
                                    is-not-remote-hover-target
                                    class="recordingBadge"
                                    sprite="name: recording-badge.png"
                                    scale="0.10 0.10 0.10"
                                    position="0 1.2 -0.02"
                                ></a-entity>
                                <a-entity
                                    billboard
                                    is-not-remote-hover-target
                                    class="modBadge"
                                    sprite="name: mod-badge.png"
                                    scale="0.10 0.10 0.10"
                                    position="0 1.2 -0.02"
                                ></a-entity>
                            </a-entity>
                        </template>

                        <template data-name="Spine">
                            <a-entity is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
                                <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
                                <a-entity class="interactable ui interactable-ui">
                                    <a-entity billboard class="freeze-menu" visibility-while-frozen="withinDistance: 100; requireHoverOnNonMobile: false;" avatar-volume-controls>
                                        <a-entity class="avatar-volume-label" text="value: 0%; anchor: center; align: center; color: #ff3464; letterSpacing: 4; width:1.5;" text-raycast-hack position="0.0 0.675 0.35" scale="1.25 1.25 1.25"></a-entity>
                                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="-0.45 0.675 0.35" class="avatar-volume-down-button">
                                            <a-entity text="value: -; anchor: center; align: center; color: #ccc; letterSpacing: 4; width: 2.5;" text-raycast-hack position="0 0 0.001" scale="0.85 0.85 0.85"></a-entity>
                                        </a-entity>
                                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="0.45 0.675 0.35" class="avatar-volume-up-button">
                                            <a-entity text="value: +; anchor: center; align: center; color: #ccc; letterSpacing: 4; width: 2.5;" text-raycast-hack position="0 0 0.001" scale="0.85 0.85 0.85"></a-entity>
                                        </a-entity>
                                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" block-button position="0 0 .35">
                                            <a-entity text="value:Hide; width:2.5; align:center;" text-raycast-hack position="0 0 0.001"></a-entity>
                                        </a-entity>
                                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" visible-if-permitted="mute_users" mute-button position="0 -0.3 .35" scale="0.8 0.8 0.8">
                                            <a-entity text="value:Mute; width:2.5; align:center;" text-raycast-hack visible-if-permitted="mute_users" position="0 0 0.001"></a-entity>
                                        </a-entity>
                                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" visible-if-permitted="kick_users" kick-button position="0 -0.5 .35" scale="0.8 0.8 0.8">
                                            <a-entity text="value:Kick; width:2.5; align:center;" text-raycast-hack visible-if-permitted="kick_users" position="0 0 0.001"></a-entity>
                                        </a-entity>
                                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" camera-focus-button="track: false; selector: .Head;" position="-0.40 0.375 0.35">
                                            <a-entity text=" value:focus; width:1.75; align:center;" text-raycast-hack position="0.075 0 0.02"></a-entity>
                                            <a-entity
                                                sprite
                                                icon-button="image: camera-action.png; hoverImage: camera-action.png;"
                                                scale="0.165 0.165 0.165"
                                                position="-0.125 0.005 0.02"
                                            ></a-entity>
                                        </a-entity>
                                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" camera-focus-button="track: true; selector: .Head;" position="0.40 0.375 0.35">
                                            <a-entity text=" value:track; width:1.75; align:center;" text-raycast-hack position="0.075 0 0.02"></a-entity>
                                            <a-entity
                                                sprite
                                                icon-button="image: camera-action.png; hoverImage: camera-action.png;"
                                                scale="0.165 0.165 0.165"
                                                position="-0.125 0.005 0.001"
                                            ></a-entity>
                                        </a-entity>
                                    </a-entity>
                                </a-entity>
                            </a-entity>
                        </template>

                        <template data-name="Head">
                            <a-entity
                                avatar-audio-source="rolloffFactor: 2.0;"
                                personal-space-invader="radius: 0.15; useMaterial: true;"
                                bone-visibility
                                body-helper="type: kinematic; collisionFilterGroup: 4; collisionFilterMask: 1;"
                                shape-helper="type: cylinder; fit: manual; halfExtents: 0.11 0.10 0.11; offset: 0 0.06 0.04;"
                            ></a-entity>
                        </template>

                        <template data-name="LeftHand">
                            <a-entity personal-space-invader="radius: 0.1" bone-visibility="updateWhileInvisible: true;"></a-entity>
                        </template>

                        <template data-name="RightHand">
                            <a-entity personal-space-invader="radius: 0.1" bone-visibility="updateWhileInvisible: true;"></a-entity>
                        </template>
                    </a-entity>
                </a-entity>
            </template>

            <template id="static-media">
                <a-entity
                    body-helper="type: static; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 1;"
                >
                </a-entity>
            </template>

            <template id="static-controlled-media">
                <a-entity
                    class="interactable"
                    body-helper="type: static; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 1;"
                    is-remote-hover-target
                    position-at-box-shape-border__freeze="target:.freeze-menu;"
                    tags="isStatic: true; togglesHoveredActionSet: true; inspectable: true;"
                    listed-media
                >
                    <a-entity class="freeze-menu" visibility-while-frozen="withinDistance: 100;">
                        <a-entity mixin="rounded-text-button ui"
                            is-remote-hover-target
                            tags="singleActionButton: true; isHoverMenuChild: true;"
                            local-refresh-media-button
                            position="0 -0.6 0.001"
                        >
                            <a-entity text="value:refresh; width:1.75; align:center;"
                                text-raycast-hack
                                position="0 0 0.02">
                            </a-entity>
                        </a-entity>
                        <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" open-media-button="onlyOpenLink: true" position="0 -0.25 0.001">
                            <a-entity text="value:open link; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                        </a-entity>
                        <a-entity
                            mixin="rounded-action-button"
                            is-remote-hover-target
                            tags="singleActionButton:true;"
                            mirror-media-button
                            visibility-on-content-types="contentTypes: video/ audio/ image/ application/vnd.apple.mpegurl application/x-mpegurl application/pdf;"
                            position="0 0 0.001">
                            <a-entity
                                sprite
                                icon-button="image: inspect-action.png; hoverImage: inspect-action.png"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity
                            mixin="rounded-button"
                            tags="isHoldable: true; holdableButton: true;"
                            is-remote-hover-target
                            inspect-button
                            position="0 0.25 0.001">
                            <a-entity
                                sprite
                                icon-button="image: focus-action.png; hoverImage: focus-action.png"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="interactable-media">
                <a-entity
                    class="interactable"
                    body-helper="type: dynamic; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 15;"
                    owned-object-limiter="counter: #media-counter"
                    set-unowned-body-kinematic
                    is-remote-hover-target
                    tags="isHandCollisionTarget: true; isHoldable: true; offersHandConstraint: true; offersRemoteConstraint: true; inspectable: true;"
                    destroy-at-extreme-distances
                    scalable-when-grabbed
                    floaty-object="modifyGravityOnRelease: true; autoLockOnLoad: true;"
                    set-yxz-order
                    matrix-auto-update
                    hoverable-visuals
                    position-at-border__freeze="target:.freeze-menu"
                    position-at-border__freeze-unprivileged="target:.freeze-unprivileged-menu"
                    listed-media
                    use-audio-system-settings
                >
                    <a-entity class="ui interactable-ui">
                        <a-entity class="freeze-menu" visibility-while-frozen="withinDistance: 100; withPermission: spawn_and_move_media">
                            <a-entity
                                mixin="rounded-text-action-button"
                                is-remote-hover-target
                                tags="singleActionButton:true"
                                pin-networked-object-button="tipSelector:.pin-button-tip; labelSelector:.pin-button-label;"
                                position="0 0.125 0.001">
                                <a-entity
                                    class="pin-button-label"
                                    visible="false"
                                    text=" value:pin; width:1.75; align:center;"
                                    text-raycast-hack
                                    position="0 0 0.001">
                                </a-entity>
                            </a-entity>
                            <a-entity
                                class="pin-button-tip"
                                text="value:Pinning will broadcast this object to Discord.; width:1.75; align:center; color:#fff;"
                                visible="false"
                                text-raycast-hack
                                slice9="
                                    color: #0F40A9;
                                    width: 1.8;
                                    height: 0.2;
                                    left: 64;
                                    top: 64;
                                    right: 66;
                                    bottom: 66;
                                    opacity: 1.0;
                                    src: #button"
                                position="0 0.6 0.001">
                            </a-entity>
                            <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" camera-focus-button="track: false" position="-0.25 0.375 0.001">
                                <a-entity text=" value:focus; width:1.75; align:center;" text-raycast-hack position="0.075 0 0.02"></a-entity>
                                <a-entity
                                    sprite
                                    icon-button="image: camera-action.png; hoverImage: camera-action.png;"
                                    scale="0.165 0.165 0.165"
                                    position="-0.125 0.005 0.02"
                                ></a-entity>
                            </a-entity>
                            <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" camera-focus-button="track: true" position="0.25 0.375 0.001">
                                <a-entity text=" value:track; width:1.75; align:center;" text-raycast-hack position="0.075 0 0.02"></a-entity>
                                <a-entity
                                    sprite
                                    icon-button="image: camera-action.png; hoverImage: camera-action.png;"
                                    scale="0.165 0.165 0.165"
                                    position="-0.125 0.005 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-button"
                                is-remote-hover-target
                                tags="singleActionButton: true;"
                                hide-when-pinned-and-forbidden="whenPinned: true"
                                remove-networked-object-button
                                position="0 -0.375 0.001">
                                <a-entity
                                    sprite="name: remove-action.png"
                                    icon-button="image: remove-action.png; hoverImage: remove-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity visibility-on-content-types="contentTypes: video/ audio/ image/ application/vnd.apple.mpegurl application/x-mpegurl application/pdf; visible: false;">
                                <a-entity
                                    mixin="rounded-button"
                                    is-remote-hover-target
                                    tags="singleActionButton: true;"
                                    drop-object-button
                                    hide-when-pinned-and-forbidden="whenPinned: true"
                                    position="0 -0.625 0.001">
                                    <a-entity
                                        sprite
                                        icon-button="image: drop-action.png; hoverImage: drop-action.png"
                                        scale="0.165 0.165 0.165"
                                        position="0 0 0.001"
                                    ></a-entity>
                                </a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-button"
                                is-remote-hover-target
                                tags="isHoldable: true; holdableButton: true;"
                                inspect-button
                                visibility-on-content-types="contentTypes: video/ audio/ image/ application/vnd.apple.mpegurl application/x-mpegurl application/pdf;"
                                position="0 -0.625 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: focus-action.png; hoverImage: focus-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity
                                class="deserialize-drawing"
                                visible="false"
                                mixin="rounded-button"
                                is-remote-hover-target
                                tags="singleActionButton: true;"
                                deserialize-drawing-button
                                position="0.250 -0.625 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: deserialize-action.png; hoverImage: deserialize-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" open-media-button="onlyOpenLink: true" position="0.43 -0.375 0.001">
                                <a-entity text="value:open link; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                            </a-entity>
                            <a-entity mixin="rounded-text-button ui"
                                is-remote-hover-target
                                tags="singleActionButton: true; isHoverMenuChild: true;"
                                local-refresh-media-button
                                position="0.43 -0.6 0.001"
                            >
                                <a-entity text="value:refresh; width:1.75; align:center;"
                                    text-raycast-hack
                                    position="0 0 0.02">
                                </a-entity>
                            </a-entity>
                            <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" clone-media-button position="-0.43 -0.375 0.001">
                                <a-entity text="value:clone; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-action-button"
                                tags="isHoldable: true; holdableButton: true;"
                                is-remote-hover-target
                                transform-button
                                transform-button-selector
                                hide-when-pinned-and-forbidden
                                position="-0.3 -0.125 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: rotate-action.png; hoverImage: rotate-action.png;"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-action-button"
                                is-remote-hover-target
                                tags="singleActionButton:true;"
                                mirror-media-button
                                visibility-on-content-types="contentTypes: video/ audio/ image/ application/vnd.apple.mpegurl application/x-mpegurl application/pdf;"
                                position="0 -0.125 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: inspect-action.png; hoverImage: inspect-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-action-button"
                                tags="isHoldable: true; holdableButton: true;"
                                is-remote-hover-target
                                scale-button
                                hide-when-pinned-and-forbidden
                                position="0.3 -0.125 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: scale-action.png; hoverImage: scale-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                        </a-entity>
                        <a-entity class="freeze-unprivileged-menu" visibility-while-frozen="withinDistance: 100; withoutPermission: spawn_and_move_media;">
                            <a-entity mixin="rounded-text-button ui"
                                is-remote-hover-target
                                tags="singleActionButton: true; isHoverMenuChild: true;"
                                local-refresh-media-button
                                position="0 -0.6 0.001"
                            >
                                <a-entity text="value:refresh; width:1.75; align:center;"
                                    text-raycast-hack
                                    position="0 0 0.02">
                                </a-entity>
                            </a-entity>
                            <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" open-media-button="onlyOpenLink: true" position="0 -0.25 0.001">
                                <a-entity text="value:open link; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-action-button"
                                is-remote-hover-target
                                tags="singleActionButton:true;"
                                mirror-media-button
                                visibility-on-content-types="contentTypes: video/ audio/ image/ application/vnd.apple.mpegurl application/x-mpegurl application/pdf;"
                                position="0 0 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: inspect-action.png; hoverImage: inspect-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                            <a-entity
                                mixin="rounded-button"
                                tags="isHoldable: true; holdableButton: true;"
                                is-remote-hover-target
                                inspect-button
                                position="0 0.25 0.001">
                                <a-entity
                                    sprite
                                    icon-button="image: focus-action.png; hoverImage: focus-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="interactable-emoji">
                <a-entity
                    class="interactable"
                    emoji
                    body-helper="type: dynamic; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 15;"
                    owned-object-limiter="counter: #emoji-counter"
                    owned-object-cleanup-timeout="counter: #emoji-counter; ttl: 3;"
                    set-unowned-body-kinematic
                    is-remote-hover-target
                    tags="isHandCollisionTarget: true; isHoldable: true; offersHandConstraint: true; offersRemoteConstraint: true; inspectable: true;"
                    destroy-at-extreme-distances
                    scalable-when-grabbed
                    floaty-object="modifyGravityOnRelease: true; autoLockOnLoad: true;"
                    set-yxz-order
                    matrix-auto-update
                    position-at-border__freeze="target:.freeze-menu;"
                    hoverable-visuals
                >
                    <a-entity
                        class="particle-emitter"
                        particle-emitter="particleCount: 0"
                        scale="0.25 0.25 0.25"
                        position="0 0.25 -0.001"
                    ></a-entity>
                    <a-entity class="ui interactable-ui">
                        <a-entity class="freeze-menu" visibility-while-frozen="withinDistance: 100; withPermission: spawn_and_move_media; visibleIfOwned: false;">
                            <a-entity
                                mixin="rounded-button"
                                is-remote-hover-target
                                tags="singleActionButton: true;"
                                hide-when-pinned-and-forbidden="whenPinned: true"
                                remove-networked-object-button
                                position="0 -0.375 0.001">
                                <a-entity
                                    sprite="name: remove-action.png"
                                    icon-button="image: remove-action.png; hoverImage: remove-action.png"
                                    scale="0.165 0.165 0.165"
                                    position="0 0 0.001"
                                ></a-entity>
                            </a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="linked-media">
                <a-entity
                    class="interactable"
                    body-helper="type: dynamic; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 15;"
                    is-remote-hover-target
                    tags="togglesHoveredActionSet: true; inspectable: true;"
                    set-unowned-body-kinematic
                    set-yxz-order
                    matrix-auto-update
                >
                    <a-entity class="ui interactable-ui">
                    </a-entity>
                </a-entity>
            </template>

            <template id="interactable-pen">
                <a-entity
                    class="pen interactable"
                    body-helper="type: dynamic; mass: 0.001; collisionFilterGroup: 1; collisionFilterMask: 15; gravity: 0 0 0;"
                    gltf-model-plus="src: #drawing-pen; inflate: true;"
                    owned-object-limiter="counter: #pen-counter"
                    set-unowned-body-kinematic
                    is-remote-hover-target
                    tags="isHandCollisionTarget: true; isHoldable: true; offersHandConstraint: true; offersRemoteConstraint: true; isPen: true;"
                    floaty-object="modifyGravityOnRelease: true; autoLockOnLoad: true; gravitySpeedLimit: 0; reduceAngularFloat: true;"
                    matrix-auto-update
                    scale="0.5 0.5 0.5"
                    action-to-remove__pen="path: /actions/pen/remove;"
                    position-at-border="target:.pen-menu"
                    set-yxz-order
                >
                    <a-entity
                        id="pen"
                        position="0 -0.18 0"
                        pen="camera: #avatar-pov-node; drawingManager: #drawing-manager"
                        pen-laser
                    ></a-entity>
                    <a-entity class="ui delete-button pen-menu" visibility-while-frozen="withinDistance: 100; withPermission: spawn_drawing" >
                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true" remove-networked-object-button position="0 0 0.001">
                            <a-entity
                                sprite
                                icon-button="image: remove-action.png; hoverImage: remove-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="interactable-camera">
                <a-entity
                    class="interactable"
                    body-helper="type: dynamic; mass: 0.001; collisionFilterGroup: 1; collisionFilterMask: 8;"
                    camera-tool
                    is-remote-hover-target
                    tags="isHandCollisionTarget: true; isHoldable: true; offersHandConstraint: true; offersRemoteConstraint: true;"
                    matrix-auto-update
                    shape-helper="type: box; fit: manual; halfExtents: 0.22 0.14 0.1; offset: 0 0.02 0;"
                    floaty-object="autoLockOnRelease: true; autoLockOnLoad: true;"
                    owned-object-limiter="counter: #camera-counter"
                    set-unowned-body-kinematic
                    scalable-when-grabbed
                    position-at-border="target:.camera-menu; isFlat: true"
                    set-yxz-order
                >
                    <a-entity class="ui interactable-ui camera-snap-menu" visible-if-permitted="spawn_camera">
                        <a-entity
                            class="label"
                            text="value: text; align: center; color: #fafafa"
                            position="0 0.15 0.081"
                            scale="1.95 1.95 1.95"
                        ></a-entity>
                        <a-entity class="label-action-background" mixin="rounded-action-button" is-remote-hover-target tags="singleActionButton: true;" position="0 0.15 0.08" scale="0.75 0.75 0.75">
                        </a-entity>
                        <a-entity class="label-background" mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="0 0.15 0.08" scale="0.75 0.75 0.75">
                        </a-entity>
                        <a-entity
                            class="duration"
                            text="value: 5s; align: center; color: #fafafa"
                            position="0 -0.15 0.09"
                            scale="1.9 1.9 1.9"
                        ></a-entity>
                        <a-entity class="snap-button" mixin="rounded-action-button" is-remote-hover-target tags="singleActionButton: true;" position="0 0.15 0.08" scale="0.75 0.75 0.75">
                            <a-entity
                                sprite class="snap-icon"
                                icon-button="image: snap_camera.png; hoverImage: snap_camera.png;"
                                scale="0.2 0.2 0.2"
                                position="0 0.002 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity class="record-button" mixin="rounded-action-button" is-remote-hover-target tags="singleActionButton: true;" position="0 -0.15 0.075" scale="0.75 0.75 0.75">
                            <a-entity
                                sprite class="record-icon"
                                icon-button="image: record-action.png; hoverImage: record-action.png;"
                                scale="0.175 0.175 0.175"
                                position="0 0 0.001"
                            ></a-entity>
                            <a-entity
                                sprite class="record-alpha-icon"
                                icon-button="image: record-action-alpha.png; hoverImage: record-action-alpha.png;"
                                scale="0.175 0.175 0.175"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity class="cancel-button" mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="0 -0.15 0.075" scale="0.65 0.65 0.65">
                            <a-entity
                                sprite
                                icon-button="image: close-action.png; hoverImage: close-action.png;"
                                scale="0.075 0.075 0.075"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity class="prev-duration" mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="-0.135 -0.15 0.075" scale="0.5 0.5 0.5">
                            <a-entity
                                sprite
                                icon-button="image: prev.png; hoverImage: prev.png;"
                                scale="0.075 0.075 0.075"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity class="next-duration" mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="0.135 -0.15 0.075" scale="0.5 0.5 0.5">
                            <a-entity
                                sprite
                                icon-button="image: next.png; hoverImage: next.png;"
                                scale="0.075 0.075 0.075"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity class="stop-button" mixin="rounded-action-button" is-remote-hover-target tags="singleActionButton: true;" position="0 0.15 0.08" scale="0.75 0.75 0.75">
                            <a-entity
                                sprite class="stop-icon"
                                icon-button="image: stop-action.png; hoverImage: stop-action.png;"
                                scale="0.125 0.125 0.125"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                    <a-entity class="ui interactable-ui camera-menu" visibility-while-frozen="withinDistance: 100; withPermission: spawn_camera">
                        <a-entity mixin="rounded-action-button" class="capture-audio" is-remote-hover-target tags="singleActionButton: true;" position="0 0.125 0.001">
                            <a-entity sprite class="capture-audio-icon"
                                icon-button="image: unmute-action.png; hoverImage: unmute-action.png; activeImage: mute-action.png; activeHoverImage: mute-action.png"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity mixin="rounded-action-button" is-remote-hover-target tags="singleActionButton: true;" transform-button="mode: align;" position="-0.15 -0.125 0.001">
                            <a-entity
                                sprite
                                icon-button="image: recenter-action.png; hoverImage: recenter-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity mixin="rounded-action-button" is-remote-hover-target tags="isHoldable: true; holdableButton: true;" transform-button transform-button-selector position="0.15 -0.125 0.001">
                            <a-entity
                                sprite
                                icon-button="image: rotate-action.png; hoverImage: rotate-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true" remove-networked-object-button position="0 -0.350 0.001">
                            <a-entity
                                sprite
                                icon-button="image: remove-action.png; hoverImage: remove-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="interactable-drawing">
                <a-entity
                    class="drawing"
                    networked-drawing
                    is-remote-hover-target
                >
                    <a-entity class="ui drawing-menu" visible="false">
                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true" position="0.075 0.125 0.001" class="undo-drawing">
                            <a-entity
                                sprite
                                icon-button="image: undo-action.png; hoverImage: undo-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true" position="0.075 -0.125 0.001" class="delete-drawing">
                            <a-entity
                                sprite
                                icon-button="image: remove-action.png; hoverImage: remove-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                        <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true" position="-0.125 0 0.001" class="serialize-drawing">
                            <a-entity
                                sprite
                                icon-button="image: serialize-action.png; hoverImage: serialize-action.png;"
                                scale="0.165 0.165 0.165"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="pager-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity class="prev-button" position="-0.35 0 0">
                        <a-entity is-remote-hover-target tags="singleActionButton:true; isHoverMenuChild: true;" mixin="rounded-text-button" slice9="width: 0.2">
                            <a-entity
                                sprite
                                icon-button="image: prev.png; hoverImage: prev.png;"
                                scale="0.075 0.075 0.075"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                    <a-entity class="page-label" position="0 -0.2 0" text="value:.; width:2; align:center;" text-raycast-hack></a-entity>
                    <a-entity class="snap-button" position="0 0.175 0" scale="0.75 0.75 1">
                        <a-entity is-remote-hover-target tags="singleActionButton:true; isHoverMenuChild: true;" mixin="rounded-text-button" slice9="width: 0.2">
                            <a-entity
                                sprite
                                icon-button="image: snap-page.png; hoverImage: snap-page.png;"
                                scale="0.115 0.115 0.115"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                    <a-entity class="next-button" position="0.35 0 0">
                        <a-entity is-remote-hover-target tags="singleActionButton:true; isHoverMenuChild: true;" mixin="rounded-text-button" slice9="width: 0.2">
                            <a-entity
                                sprite
                                icon-button="image: next.png; hoverImage: next.png;"
                                scale="0.075 0.075 0.075"
                                position="0 0 0.001"
                            ></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <!-- TODO: All of these positions are assuming 16:9 - need to actually reposition based on video resolution -->

            <template id="video-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true; isHoverMenuChild: true;"
                        sprite
                        icon-button="image: snap.png; hoverImage: snap-hover.png; activeImage: snap.png; activeHoverImage: snap-hover.png"
                        visibility-on-content-types="contentTypes: video/mp4; contentSubtype: video-camera; visible: false;"
                        scale="0.075 0.075 0.075"
                        position="0 0.225 0"
                        class="video-snap-button"
                    ></a-entity>
                    <a-entity mixin="rounded-twitter-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" tweet-media-button visibility-on-content-types="contentTypes: video/mp4; contentSubtype: video-camera; visible: true;" position="0 0.285 0.001">
                        <a-entity text="value:tweet; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                    <a-entity class="video-time-label" text="value: 0; anchor: center; align: center; color: #aaa;" text-raycast-hack position="0 -0.24 0" scale="0.75 0.75 0.75"></a-entity>
                    <a-entity class="video-volume-label" text="value: 0%; anchor: center; align: center; color: #ccc; letterSpacing: 4;" text-raycast-hack position="0.0 0.14 0.0015" scale="1.25 1.25 1.25"></a-entity>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true; isHoverMenuChild: true;"
                        sprite
                        icon-button="image: volume_down.png; hoverImage: volume_down-hover.png;"
                        scale="0.075 0.075 0.075"
                        position="-0.275 0.14 0"
                        class="ui video-volume-down-button"
                    ></a-entity>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true; isHoverMenuChild: true;"
                        sprite
                        icon-button="image: volume_up.png; hoverImage: volume_up-hover.png;"
                        scale="0.075 0.075 0.075"
                        position="0.275 0.14 0"
                        class="ui video-volume-up-button"
                    ></a-entity>
                    <a-entity class="video-playback">
                        <a-entity
                            is-remote-hover-target
                            tags="singleActionButton: true; isHoverMenuChild: true;"
                            sprite
                            icon-button="image: seek_back.png; hoverImage: seek_back-hover.png;"
                            scale="0.1 0.1 0.1"
                            position="-0.3 -0.125 0"
                            class="ui video-seek-back-button"
                            visible="false"
                        ></a-entity>
                        <a-entity
                            is-remote-hover-target
                            tags="singleActionButton: true; isHoverMenuChild: true;"
                            sprite
                            icon-button="image: pause.png; hoverImage: pause-hover.png; activeImage: play.png; activeHoverImage: play-hover.png"
                            scale="0.15 0.15 0.15"
                            position="0 -0.125 0"
                            class="ui video-playpause-button"
                            visible="false"
                        ></a-entity>
                        <a-entity
                            is-remote-hover-target
                            tags="singleActionButton: true; isHoverMenuChild: true;"
                            sprite
                            icon-button="image: seek_fwd.png; hoverImage: seek_fwd-hover.png;"
                            scale="0.1 0.1 0.1"
                            position="0.3 -0.125 0"
                            class="ui video-seek-forward-button"
                            visible="false"
                        ></a-entity>
                    </a-entity>
                </a-entity>
            </template>


            <template id="hubs-destination-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button position="0 -0.125 0.001">
                        <a-entity text="value:value; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="avatar-link-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button position="0 -0.125 0.001">
                        <a-entity text="width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" remix-avatar-button position="0 -0.35 0.001" visible="false">
                        <a-entity text="width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="link-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity mixin="rounded-text-button ui"
                    is-remote-hover-target tags="singleActionButton: true;
                    isHoverMenuChild: true;" scale="0.8 0.8 0.8" refresh-media-button position="0 0.125 0.001">
                        <a-entity text="value:refresh; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button position="0 -0.125 0.001">
                        <a-entity text="value:open link; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="photo-hover-menu">
                <a-entity class="ui interactable-ui hover-container" visible="false">
                    <a-entity mixin="rounded-twitter-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" tweet-media-button position="0 0.285 0.001">
                        <a-entity text="value:tweet; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <template id="video-unmute">
                <a-entity
                    class="ui interactable-ui hover-container unmute-ui"
                    position="0 0 0.1"
                    visibility-while-frozen="visible: false; withinDistance: 100; requireHoverOnNonMobile: false;"
                >
                    <a-entity is-remote-hover-target tags="singleActionButton:true;" mixin="rounded-text-button" slice9="width: 0.4" unmute-video-button position="0 -0.5 0.001">
                        <a-entity text="value:unmute; width:2; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <a-mixin id="rounded-text-button"
                slice9="
                    width: 0.45;
                    height: 0.2;
                    left: 64;
                    top: 64;
                    right: 66;
                    bottom: 66;
                    opacity: 1.0;
                    src: #button"
            ></a-mixin>

            <a-mixin id="rounded-button"
                slice9="
                    width: 0.2;
                    height: 0.2;
                    left: 64;
                    top: 64;
                    right: 66;
                    bottom: 66;
                    opacity: 1.0;
                    src: #button"
            ></a-mixin>

            <a-mixin id="rounded-text-action-button"
                slice9="
                    width: 0.45;
                    height: 0.2;
                    left: 64;
                    top: 64;
                    right: 66;
                    bottom: 66;
                    opacity: 1.0;
                    src: #action-button"
            ></a-mixin>

            <a-mixin id="rounded-action-button"
                slice9="
                    width: 0.2;
                    height: 0.2;
                    left: 64;
                    top: 64;
                    right: 66;
                    bottom: 66;
                    opacity: 1.0;
                    src: #action-button"
            ></a-mixin>

            <a-mixin id="rounded-twitter-text-action-button"
                text-button="
                    textHoverColor: #fff;
                    textColor: #fff;
                    backgroundColor: #1da1f2;
                    backgroundHoverColor: #2db1ff;
                    "
                slice9="
                    width: 0.45;
                    height: 0.2;
                    left: 64;
                    top: 64;
                    right: 66;
                    bottom: 66;
                    opacity: 1.0;
                    src: #button"
            ></a-mixin>
        </a-assets>

        <!-- HACK - We use this object to trigger initial batch preparation -->
        <a-entity id="batch-prep" visible="false"></a-entity>

        <!-- Interactables -->
        <a-entity id="media-counter" networked-counter="max: 20;"></a-entity>

        <a-entity id="pen-counter" networked-counter="max: 10;"></a-entity>

        <a-entity id="emoji-counter" networked-counter="max: 2;"></a-entity>

        <a-entity id="camera-counter" networked-counter="max: 1;"></a-entity>

        <a-entity id="drawing-manager" drawing-manager="penSpawner: #pen-spawner"></a-entity>

        <a-entity
            id="right-cursor-controller"
            cursor-controller="cursor: #right-cursor; camera: #avatar-pov-node;"
        ></a-entity>

        <a-entity
            id="left-cursor-controller"
            cursor-controller="cursor: #left-cursor; camera: #avatar-pov-node;"
        ></a-entity>

        <a-sphere
            id="right-cursor"
            material="shader: flat; depthTest: false; opacity:0.9;"
            radius="0.02"
            segments-width="9"
            segments-height="9"
            body-helper="type: kinematic; disableCollision: true; collisionFilterGroup: 8; collisionFilterMask: 0; scaleAutoUpdate: false; activationState: disable_deactivation;"
            shape-helper="type: sphere; sphereRadius: 0.02; fit: manual;"
            scale-in-screen-space="baseScale: 0.10 0.10 0.10; addedScale: 0.4 0.4 0.4">
            <a-entity
                sprite
                icon-button="image: rotate-cursor.png"
                scale="0.1 0.1 0.1"
                position="0.0 0 0"
                class="hud"
                visible-if-transforming="hand:right"
            ></a-entity>
        </a-sphere>

        <a-sphere
            id="left-cursor"
            material="shader: flat; depthTest: false; opacity:0.9;"
            radius="0.02"
            segments-width="9"
            segments-height="9"
            body-helper="type: kinematic; disableCollision: true; collisionFilterGroup: 8; collisionFilterMask: 0; scaleAutoUpdate: false; activationState: disable_deactivation;"
            shape-helper="type: sphere; sphereRadius: 0.02; fit: manual;"
            scale-in-screen-space="baseScale: 0.10 0.10 0.10; addedScale: 0.4 0.4 0.4">
            <a-entity
                sprite
                icon-button="image: rotate-cursor.png"
                scale="0.1 0.1 0.1"
                position="0.0 0 0"
                class="hud"
                visible-if-transforming="hand:left"
            ></a-entity>
        </a-sphere>

        <!-- Avatar Rig -->
        <a-entity
            id="avatar-rig"
            ik-root
            player-info
            set-yxz-order
            periodic-full-syncs
            visible="false"
        >
            <a-entity
                id="player-hud"
                hud-controller="head: #viewing-camera;"
                vr-mode-toggle-class="class: ui"
                vr-mode-toggle-visibility
                vr-mode-toggle-playing__hud-controller
            >
                <a-entity visibility-while-frozen="requireHoverOnNonMobile: false;" rotation="30 0 0">
                    <a-entity class="leave-btn" position="0 0 0" scale="0.7 0.7 0.7" leave-room-button is-remote-hover-target tags="singleActionButton: true;">
                        <a-entity mixin="rounded-text-action-button" slice9="width: 0.8" scale="0.8 0.8 1.0">
                            <a-entity text=" value:leave room; width:2; align:center;" text-raycast-hack position="0 0 0.001"></a-entity>
                        </a-entity>
                    </a-entity>
                </a-entity>
                <a-entity in-world-hud visibility-while-frozen="visible: false; requireHoverOnNonMobile: false;" rotation="30 0 0" >
                    <a-rounded height="0.08" width="0.2" color="#000000" position="-0.44 -0.045 0" radius="0.040" opacity="0.35" class="hud bg"></a-rounded>
                    <a-image scale="0.07 0.06 0.06" position="-0.38 -0.005 0.001" src="#presence-count" material="alphaTest:0.1;"></a-image>
                    <a-entity id="hud-presence-count" text="value: ; width:1.1; align:center;" position="-0.30 -0.005 0" matrix-auto-update="target: text;"></a-entity>
                    <a-entity class="invite-btn" position="0 0.18 0" scale="0.7 0.7 0.7" is-remote-hover-target tags="singleActionButton: true;">
                        <a-entity mixin="rounded-text-action-button" slice9="width: 0.7" scale="0.8 0.8 1.0">
                            <a-entity text=" value:invite; width:2; align:center;" text-raycast-hack position="0 0 0.001"></a-entity>
                        </a-entity>
                    </a-entity>
                    <a-rounded visible="false" vr-mode-toggle-visibility id="hud-tooltip" height="0.08" width="0.4" color="#000000" position="-0.2 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
                        <a-entity text="value: ; align:center;" position="0.2 0.04 0.001" matrix-auto-update="target: text"></a-entity>
                    </a-rounded>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true"
                        sprite
                        mic-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic;"
                        scale="0.1 0.1 0.1"
                        position="-0.17 0 0.001"
                        class="hud mic"
                        material="alphaTest:0.1;"
                    ></a-entity>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true"
                        sprite
                        icon-button="
                            tooltip: #hud-tooltip;
                            tooltipText: Create;
                            activeTooltipText: Resume;
                            image: spawn.png;
                            hoverImage: spawn-hover.png;
                            disabledImage: spawn-disabled.png;"
                        scale="0.2 0.2 0.2"
                        position="0 0 0.005"
                        class="hud spawn"
                    ></a-entity>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true"
                        sprite
                        icon-button="
                            tooltip: #hud-tooltip;
                            tooltipText: Pen;
                            activeTooltipText: Pen;
                            image: pen_off.png;
                            hoverImage: pen_off-hover.png;
                            activeImage: pen_on.png;
                            activeHoverImage: pen_on-hover.png;
                            disabledImage: pen_off-disabled.png;"
                        scale="0.1 0.1 0.1"
                        position="0.17 0 0.001"
                        class="hud penhud"
                        material="alphaTest:0.1;"
                    ></a-entity>
                    <a-entity
                        is-remote-hover-target
                        tags="singleActionButton: true"
                        sprite
                        icon-button="
                            tooltip: #hud-tooltip;
                            tooltipText: Camera;
                            activeTooltipText: Camera;
                            image: camera_off.png;
                            hoverImage: camera_off-hover.png;
                            activeImage: camera_on.png;
                            activeHoverImage: camera_on-hover.png;
                            disabledImage: camera_off-disabled.png;"
                        scale="0.1 0.1 0.1"
                        position="0.28 0 0.001"
                        class="hud camera-btn"
                        material="alphaTest:0.1;"
                    ></a-entity>
                </a-entity>
            </a-entity>

            <a-entity
                id="avatar-pov-node"
                class="camera"
                personal-space-bubble="radius: 0.4;"
                rotation
                pitch-yaw-rotator
                set-yxz-order
                position="0 1.6 0"
            >
                <a-entity
                    id="gaze-teleport"
                    position = "0.15 0 0"
                    teleporter="start: /actions/startTeleport; confirm: /actions/stopTeleport; collisionEntities: [nav-mesh];"
                ></a-entity>
                <a-entity id="stats" stats-plus="false" position="0 0 -1"></a-entity>
            </a-entity>

            <a-entity emoji-hud="camera: #avatar-pov-node;"></a-entity>

            <a-entity
                id="player-left-controller"
                class="left-controller"
                track-pose="path: /actions/leftHand/matrix"
                visibility-by-path="path: /actions/leftHand/matrix"
                hand-controls2="left"
                teleporter="start: /actions/leftHand/startTeleport; confirm: /actions/leftHand/stopTeleport; collisionEntities: [nav-mesh]"
                matrix-auto-update
                body-helper="type: kinematic; emitCollisionEvents: false; disableCollision: true; collisionFilterGroup: 8; collisionFilterMask: 3; activationState: disable_deactivation; scaleAutoUpdate: false;"
                shape-helper="type: box; fit: manual; halfExtents: 0.03 0.04 0.05; offset: 0 0 -0.04"
                set-yxz-order
            >
            </a-entity>

            <a-entity
                id="player-right-controller"
                class="right-controller"
                track-pose="path: /actions/rightHand/matrix"
                visibility-by-path="path: /actions/rightHand/matrix"
                hand-controls2="right"
                teleporter="start: /actions/rightHand/startTeleport; confirm: /actions/rightHand/stopTeleport; collisionEntities: [nav-mesh]"
                matrix-auto-update
                body-helper="type: kinematic; emitCollisionEvents: false; disableCollision: true; collisionFilterGroup: 8; collisionFilterMask: 3; activationState: disable_deactivation; scaleAutoUpdate: false;"
                shape-helper="type: box; fit: manual; halfExtents: 0.03 0.04 0.05; offset: 0 0 -0.04"
                set-yxz-order
            >
            </a-entity>

            <a-entity gltf-model-plus="inflate: true;" class="model">
                <template data-name="AvatarRoot">
                    <a-entity
                        ik-controller="alwaysUpdate: true"
                        disable-frustum-culling
                        hand-pose__left
                        hand-pose__right
                        hand-pose-controller__left="networkedAvatar:#avatar-rig;eventSrc:#player-left-controller"
                        hand-pose-controller__right="networkedAvatar:#avatar-rig;eventSrc:#player-right-controller"
                    ></a-entity>
                </template>

                <template data-name="Neck">
                    <a-entity>
                        <a-entity class="nametag" visible="false" text ></a-entity>
                    </a-entity>
                </template>
                <template data-name="Spine">
                    <a-entity>
                        <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
                    </a-entity>
                </template>
                <template data-name="Head">
                    <a-entity id="avatar-head" visible="false" bone-visibility="updateWhileInvisible: true;"></a-entity>
                </template>

                <template data-name="LeftHand">
                    <a-entity bone-visibility="updateWhileInvisible: true;" hover-visuals="hand: left;"></a-entity>
                </template>

                <template data-name="RightHand">
                    <a-entity bone-visibility="updateWhileInvisible: true;" hover-visuals="hand: right;"></a-entity>
                </template>

            </a-entity>
        </a-entity>

        <!-- Environment -->
        <a-entity
            id="environment-root"
            body-helper="type: static; mass: 0; collisionFilterGroup: 2; collisionFilterMask: 1;"
            nav-mesh-helper
        >
            <a-entity id="environment-scene"></a-entity>
        </a-entity>

        <!-- Objects -->
        <a-entity id="objects-root">
            <a-entity id="objects-scene"></a-entity>
        </a-entity>

        <a-entity
            id="pen-spawner"
            action-to-event="path: /actions/spawnPen; event: spawn_pen; withPermission: spawn_drawing"
            super-spawner="
                template: #interactable-pen;
                spawnEvent: spawn_pen;
                animateFromCursor: true;
                spawnScale: 0.5, 0.5, 0.5;
                "
        ></a-entity>

        <a-entity matrix-auto-update class="ui interactable-ui vr-notice" follow-in-fov="target: #avatar-pov-node; offset: 0 0 -0.8; angle: 39;" visible="false">
            <a-entity slice9="width: 0.8; height: 0.25; left: 64; top: 64; right: 66; bottom: 66; opacity: 1.0; src: #button"
                text-button="
                    textHoverColor: #fff;
                    textColor: #fff;
                    backgroundColor: #2f80ed;"
                position="0 0 0.001">
                <a-entity class="close-notice-button" close-vr-notice-button is-remote-hover-target tags="singleActionButton: true;" position="0 -0.075 0.001" scale="0.6 0.6 0.6">
                    <a-entity
                        sprite
                        icon-button="image: close-white.png; hoverImage: close-white.png;"
                        scale="0.05 0.05 0.05"
                        position="0 0.005 0.001"
                    ></a-entity>
                </a-entity>
                <a-entity text="value:View your desktop to continue; width:1; align:center;" position="0 0 0.001"></a-entity>
            </a-entity>
        </a-entity>
        <a-entity matrix-auto-update class="ui interactable-ui media-mirror" follow-in-fov="target: #avatar-pov-node; offset: 0 0 -0.8; angle: 39;" visible="false">
            <a-entity id="media-mirror-target" position="0 0 -0.075"></a-entity>
            <a-entity class="media-mirror-close" close-mirrored-media-button mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="0 -0.35 0.001" scale="0.65 0.65 0.65">
                <a-entity
                    sprite
                    icon-button="image: close-action.png; hoverImage: close-action.png;"
                    scale="0.075 0.075 0.075"
                    position="0 0 0.001"
                ></a-entity>
            </a-entity>
        </a-entity>
        <a-entity id="viewing-rig" set-yxz-order matrix-auto-update>
            <a-entity
                id="viewing-camera"
                camera="near: 0.05"
                set-active-camera
                rotation
                fader
                set-yxz-order
                pitch-yaw-rotator
                matrix-auto-update>
            </a-entity>
        </a-entity>
        <a-entity id="scene-preview-node">
        </a-entity>
    </a-scene>

    <div id="ui-root"></div>
</body>

</html>
